<template>
  <div>
    <p>Luna Material · You 's Color is modified with SCSS, all colors picked from<a class="primaryText" href="https://emify.gitee.io/luna-chinese-color">Luna · Chinese Color</a></p>
    <p>Luna Material · You 的颜色配置是使用SCSS进行编写的，完全取自 <a class="primaryText" href="https://emify.gitee.io/luna-chinese-color">卢娜 · 中国色</a></p>
    <div class="OverviewArea">
      <p>Colors</p>
      <p>醒目颜色展示</p>
      <div class="OverviewLine">
        <div class="OverViewItem">
          <ColorCard :bc="colorList[0].hex" :name="colorList[0].name" :rgb-bar-length="colorList[0].RGB" :cmyk-bar-length="colorList[0].CMYK"></ColorCard>
          <p>Primary Color</p>
          <p>主要色调</p>
        </div>
        <div class="OverViewItem">
          <ColorCard :bc="colorList[1].hex" :name="colorList[1].name" :rgb-bar-length="colorList[1].RGB" :cmyk-bar-length="colorList[1].CMYK"></ColorCard>
          <p>Success Color</p>
          <p>成功色调</p>
        </div>
        <div class="OverViewItem">
          <ColorCard :bc="colorList[2].hex" :name="colorList[2].name" :rgb-bar-length="colorList[2].RGB" :cmyk-bar-length="colorList[2].CMYK"></ColorCard>
          <p>Warning Color</p>
          <p>警告色调</p>
        </div>
        <div class="OverViewItem">
          <ColorCard :bc="colorList[3].hex" :name="colorList[3].name" :rgb-bar-length="colorList[3].RGB" :cmyk-bar-length="colorList[3].CMYK"></ColorCard>
          <p>Error Color</p>
          <p>错误色调</p>
        </div>
        <div class="OverViewItem">
          <ColorCard :bc="colorList[4].hex" :name="colorList[4].name" :rgb-bar-length="colorList[4].RGB" :cmyk-bar-length="colorList[4].CMYK"></ColorCard>
          <p>Alert Color</p>
          <p>提示色调</p>
        </div>
      </div>
    </div>
    <p>若您想自行更改配色，请在您的颜色配置SCSS文件中引入Luna Material · You的index.scss</p>
    <p>若您想实现夜间模式切换，请参考如下方式达成配置</p>
    <p>App.vue:</p>
    <highlightjs language="javascript" :code="NightModeCode" />
    <p>在完成上述配置后, 请增加一个按钮绑定switchTheme函数</p>
  </div>
</template>

<script>
import ColorCard from '@/components/Color/ColorCard'
export default {
  name: 'Color',
  data() {
    return {
      NightModeCode: `<div id="app" class="nightEye"></div>

data(){
  return{
    dark: false
  }
}

mounted() {
  window.document.documentElement.setAttribute('data-theme', 'dayLight')
},

methods: {
  switchTheme() {
    this.dark = !this.dark
    if (this.dark) {
      window.document.documentElement.setAttribute('data-theme', 'nightEye')
    } else {
      window.document.documentElement.setAttribute('data-theme', 'dayLight')
    }
  }
}`,
      colorList: [
        { CMYK: [2, 66, 22, 0], RGB: [222, 120, 151], hex: '#de7897', name: '\u767d\u82a8\u7ea2', pinyin: 'baijihong' },
        { CMYK: [78, 0, 62, 0], RGB: [93, 190, 138], hex: '#5dbe8a', name: '\u853b\u68a2\u7eff', pinyin: 'koushaolv' },
        { CMYK: [0, 27, 88, 0], RGB: [251, 200, 47], hex: '#fbc82f', name: '\u96c5\u68a8\u9ec4', pinyin: 'yalihuang' },
        { CMYK: [0, 93, 76, 0], RGB: [222, 28, 49], hex: '#de1c31', name: '\u5510\u83d6\u84b2\u7ea2', pinyin: 'tangchangpuhong' },
        { CMYK: [54, 89, 12, 1], RGB: [129, 60, 133], hex: '#813c85', name: '\u6854\u6897\u7d2b', pinyin: 'jiegengzi' }
      ]
    }
  },
  components: {
    ColorCard
  }
}
</script>

<style scoped></style>
